<template>
    <fieldset>
        <legend>常用api</legend>
        <input type="text" ref="ipt">
        <child ref='child'></child>
        <h1>{{ msg }}</h1>
        <h2 id="hh">nextTick:{{ msg2 }}</h2>
    </fieldset>
</template>
<script>

//ref 很常用:1.如果加到元素上面,那么可以获取真实dom元素的引用 2.如果作用在子组件上面,可以获得子组件的实例
//ref必须要等到组件挂载完成之后才能获取,也就是说要在mounted钩子中获取
//ref可以实现父子传参的流程

//$parent可以获取父组件的实例,可以实现子传父的数据传参

//provide inject 跨组件传参(爷孙传参)

//总结传参方式:
//1.父子传参: props ref;

//2.子父传参:$emit $parent

//3.兄弟传参: eventBus

//4.爷孙传参(跨组件传参):provide inject

//5.vuex pinia 传参

import child from "./child.vue"

export default {
    data() {
        return {
            msg: "",
            msg2: '苹果'
        }
    },
    components: {
        child
    },
    created() {
        console.log(this.$refs)
    },
    beforeMount() {
        console.log(this.$refs)
    },
    mounted() {
        //$parent
        // 获取父级的实例

        console.log(this.$parent)

        console.log(this.$refs)
        //让输入框元素获取焦点
        this.$refs.ipt.focus()
        this.$refs.ipt.style.color = 'hotpink'
        // this.msg = this.$refs.child.msg
        //通过父组件修改子组件的data
        setTimeout(() => {
            this.$refs.child.msg = '被父组件修改了'
        }, 2000)


        //修改msg2
        console.log('msg2修改之前--', document.getElementById('hh').innerText) //苹果
        this.msg2 = '🍌香蕉'
        console.log('msg2修改之后--', document.getElementById('hh').innerText) //苹果
        //获取数据更新之后,最新的dom元素
        // this.$nextTick(()=>{
        //     console.log('msg2修改之后--',document.getElementById('hh').innerText) //香蕉
        // })

        //其它可选方案:Promise.then  setImmediate(node才有) setTimeout

        // Promise.resolve().then(res => {
        //     console.log('msg2修改之后--', document.getElementById('hh').innerText)//香蕉
        // })

        setTimeout(() => {
            console.log('msg2修改之后--', document.getElementById('hh').innerText) //香蕉
        })
    },
    //计算属性
    // computed: {
    //     msg() {
    //         return this.$refs.child.msg
    //     }
    // }
}
</script>